<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>用户管理</title>
    <script src="163-angular.min.js"></script>
    <script src="user.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body ng-app="userApp">
<div ng-controller="userCtrl">
    <h1>用户管理</h1>
    <p>
     <a href="index.html">示例程序</a>
    <a href="user.html">用户管理</a>
    <a href="login.html">退出</a>
    <a href="model.html">流程管理</a>
    </p>
    <div ng-init="getAllUser()">
        <h2>注册的用户</h2>
        <table border="0">
            <tr>
                <td>用户名</td>
                <td>密码</td>
            </tr>
            <tr ng-repeat="user in userList">
                <td>{{user.userName}}</td>
                <td>{{user.password}}</td>
            </tr>
        </table>
    </div>
    <div ng-init="getAllGroup()">
        <h2>用户组</h2>
        <table border="0">
            <tr>
                <td>组标识</td>
                <td>组名称</td>
                <td>查看成员</td>
            </tr>
            <tr ng-repeat="group in groupList">
                <td>{{group.id}}</td>
                <td>{{group.name}}</td>
                <td>
                    <button ng-click="getGroupUser(group)">查看成员</button>
                </td>
            </tr>
        </table>
    </div>
    <div ng-if="currentGroup != null">
        <h2>{{currentGroup}} 的成员</h2>
        <table border="0">
            <tr>
                <td>用户名</td>
                <td>密码</td>
            </tr>
            <tr ng-repeat="user in groupUserList">
                <td>{{user.userName}}</td>
                <td>{{user.password}}</td>
            </tr>
        </table>
    </div>
     <div>
        <h2>添加组</h2>
            <table border="0">
                <tr>
                    <td>组名</td>
                    <td>
                        <input ng-model="group.name"/>
                    </td>
                    <td>
                        <button ng-click="addGroup()">添加</button>
                    </td>
                </tr>
            </table>
    </div>
         <div>
        <h2>添加用户到组</h2>
            <table border="0">
             <tr>
                    <td>组</td>
                    <td>
                        <select ng-model="userGroup.groupId" ng-options="group.id as group.name for group in groupList"/>
                    </td>
                </tr>
                 <tr>
                    <td>用户</td>
                    <td>
                        <select ng-model="userGroup.userName" ng-options="user.userName as user.userName for user in userList"/>
                    </td>
                </tr>
                <tr>
                <td>操作</td>
                    <td>
                        <button ng-click="addUserToGroup()">添加</button>
                    </td>
                </tr>
            </table>
    </div>
    <div>
        <h2>添加用户</h2>
            <table border="0">
                <tr>
                    <td>用户名</td>
                    <td>
                        <input ng-model="user.userName"/>
                    </td>
                    <td rowspan="3">
                        <button ng-click="addUser()">添加</button>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input ng-model="user.password" value="123456"/>
                    </td>
                </tr>
                <tr>
                    <td>用户组</td>
                    <td>
                        <select ng-model="user.groupId" ng-options="group.id as group.name for group in groupList"/>
                    </td>
                </tr>
            </table>
    </div>
</div>

</body>
</html>